<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<code>
    CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局，我们需要添加clearfix。通过这种方法，来修正父元素的高度坍塌问题（浮动元素脱离标准流，父元素会认为浮动资源不存在）。我们大部分接受这种方法，但许多人仍然认为它是一种hack（奇技淫巧）。

    通过inline-box的方法并不常见，但仍然存在。内联元素会保持在一行，他们自然顺序排列。当一行被占满，后面的元素自然折到下一行。但因为他表现为文本特性，其行为类似文本。这意味着你必须避免HTML元素之间的空白元素(空格，tab，换行……)。Inline-block不是为这设计的，不且工作的并不十分如意。

    在这两种方法中，浮动的方法更可靠。这就是为什么它更流行，排在第一位。
</code>

<style type="text/css">
    html, body, div {
        margin: 0;
        border: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box;
    }

        .row-sm-2.row-offset-2{
            position:relative;
            width:20%;
            margin-left:20%;
            float:left;
        }
        .row-sm-2{
            position:relative;
            width:20%;
            float:left;
        }

        .row-sm-8{
            position:relative;
            width:80%;
            float:left;
        }

        .row:before {
            display: table;
            content: " ";
        }
        :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .row:after {
            display: table;
            content: " ";
            clear: both;
        }

</style>

<div class="container">
    <div class="row">
        <div class="row-sm-2">part1(row-sm-2)</div>
        <div class="row-sm-8">part1(row-sm-10)</div>


    </div>

    <div class="row">
        <div class="row-sm-2 row-offset-2">part1(row-sm-2 row-offset-2)</div>
        <div class="row-sm-2">part1(row-sm-2)</div>
    </div>

    <div class="row">
        <div class="row-sm-2">part1(row-sm-2)</div>
        <div class="row-sm-8">part1(row-sm-10)</div>
        <div class="row-sm-2">part1(row-sm-2)</div>
    </div>
</div>

</body>
</html>